<template>
  <div class="box w">
    <HeaderComponent />
    <el-container>
      <!--      <el-header>-->
      <NavComponent />
      <!--      </el-header>-->

      <el-main class="main">
        <div class="leftComponent" style="float:left">
          <ContentOneComponent />
          <!-- <ContentTwoConponent/> -->
          <div class="ComponentTow" style="float: left;">
            <div class="newsComponents" style="height:160px">
              <div >
                <newsItems v-for="(i, index) in newsData" :key="index" :data=i ref="newsItemsRefs"></newsItems>
              </div>
            </div>
          </div>
        </div>
        <div class="ComponentThree" style="float: right;">
          <div calss="search" style="margin:20px">
<!--            <el-input v-model="input" placeholder="请输入内容" style="width:110px"></el-input>-->

            <el-input
                v-model="state2"
                placeholder="请输入内容"
            ></el-input>
            <el-button style="margin-left: 10px;" size="small" type="success" plain @click="push()">搜索</el-button>

          </div>
          <div class="weather" style="border:1px solid #ccc;height: 623px; margin:10px">
            <weather-report></weather-report>
          </div>
          <div class="files" style="border:1px solid #ccc; height: 385px; margin: 10px;">
            <DocumentList></DocumentList>
          </div>
        </div>
      </el-main>
      <el-footer height="260px">
        <FooterConponent />

      </el-footer>
    </el-container>

    <!-- <div class="line"></div> -->
  </div>
</template>
<script>

import NavComponent from "../components/nav/Nav.vue"
import HeaderComponent from "../components/header/Header.vue"
import ContentOneComponent from "../components/contentone/ContentOne.vue"
// import ContentTwoConponent from "../components/contenttwo/ContentTwo.vue"
import FooterConponent from "../components/footer/Footer.vue"
import newsItems from "@/components/contentone/newsItems.vue"
import WeatherReport from './WeatherReport.vue'
import DocumentList from "@/components/DocumentList.vue"

export default {
  name: "ShouYeComponent",
  components: {
    NavComponent,
    HeaderComponent,
    ContentOneComponent,
    // ContentTwoConponent,
    FooterConponent,
    newsItems,
    WeatherReport,
    DocumentList
  },
  data() {
    return {
      handleItem:[],
      state2:'',
      news:[],
      counts: 6,
      input: '',
      newsData: [{ title: '节气', type: '节气', src: '', news: [] },
      { title: '环境', type: '环境' },
      { title: '旅游', type: '旅游' },
      { title: '生态', type: '生态' },
      { title: '气象科普', type: '气象科普' },],
    }
  },

  methods: {
    // handleSelect(key, keyPath) {
    //   console.log(key, keyPath)
    // },
    // handleChange() {
      // 输入框的值发生变化时会触发该函数
      //请求搜索
      // this.$axios.get("/ ?"+this.state2).then((res) => {
      //   this.news = res.data.data.records;
      // })
      // this.news=[{ "value": "变化了", "content": "长宁区新渔路144号" ,"title":"测试","authir":"德华"}]
      // console.log(this.state2)
      // 在这里可以对输入框中的值进行处理
      //如何动态的修改推荐数据集
    // },
    querySearch(queryString, cb) {
      // console.log("this.news")
      //
      // console.log(this.news)
      var news = this.news;
      var results = queryString ? news.filter(this.createFilter(queryString)) : news;
      // 调用 callback 返回建议列表的数据
      console.log("results")

      console.log(results)
      cb(results);
    },
    createFilter(queryString) {
      return (news) => {
        return (news.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },

    // getAll(){
    //   //写请求获取所有news【‘value’,'’】
    //   // var a  = this.news.map(item => {
    //   //   return {
    //   //     ...item,
    //   //     value: item.title
    //   //   };
    //   // });
    //   // return a;
    //   return  [
    //   //
    //   //   // { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
    //   //   // { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
    //     { "value": "节气", "content": "长宁区新渔路144号" ,"title":"测试","authir":"德华"},
    //   //   // { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
    //   ];
    // },
    handleSelect(item) {
      var a = item;
      this.handleItem=a;
      // console.log("]]]]]]]]]]]]]]]]");
      //
      // console.log(this.handleItem);
      //带参数路由到文章详情页面
      // this.$router.push("/newsDetail");
      // this.$router.push({ path: '/newsDetail', query: { nId:this.handleItem.nId,nClass:this.handleItem.nClass,content:this.handleItem.content,title:this.handleItem.title,author:this.handleItem.author}})

    },
    push(){
      // this.$router.push('/searchPage?title='+)
      this.$router.push({ path: '/searchPage', query: {title:this.state2}})
    }
  },
  mounted() {
    this.$refs.newsItemsRefs.forEach(component => {
      component.getAll();
      component.getPic();
    });

    this.news=this.getAll();
  }
}
</script>
<style>


#foot {
  text-align: center;
  align-items: center;
}

.main {
  display: block;
  width: 1100px;
  /* flex: 1; */
  /* flex-basis: auto; */
  overflow: auto;
  box-sizing: border-box;
}



.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box {
  width: 1100px;
  /* height: 1000px; */
  /* padding: 0 8px; */
  background-color: white;
  margin: 0 auto;
  border: 1px solid black;
}

.ComponentThree {
  border: 1px solid #ccc;
  width: 322px;
  height: 1120px;
  /* margin-top: 50px; */
}

span:hover {
  color: red;
}
</style>
